import React from 'react'
import { Layout, Menu, theme } from 'antd';
import {useNavigate,useLocation } from 'react-router-dom';
export default function MySider() {
    // 跳转路由用
    const navigate=useNavigate()
    // 获取路由地址用
    const location=useLocation()
    const { Sider } = Layout;
    // 菜单列表
    const items2 = [
        {
            key:"/nav/home",
            label:"首页",
            roles:['超级管理员']
        },
        {
            key:"shopRule",
            label:"店铺管理",
            children:[
                {
                    key:"/nav/shopList",
                    label:"店铺列表"
                },
                {
                    key:"/nav/addShop",
                    label:"新增店铺",
                    roles:['超级管理员']
                },
            ]
        },
        {
            key:"accountRule",
            label:"账号管理",
            children:[
                {
                    key:"/nav/accountsList",
                    label:"账号列表"
                },
                {
                    key:"/nav/addAccount",
                    label:"新增账号",
                    roles:['超级管理员']
                },
            ]
        },
    ]
    // 登录者的角色身份，筛选侧边栏用
    const {role} = JSON.parse(localStorage.userInfo)
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    function filterMenu(arr,role){
        // 要么没有身份要求，要么包含该菜单项要求的身份
      return  arr.filter(item=>!item.roles || item.roles.includes(role)).map(item=>{
        const o= {
            ...item
        }
        if(item.children){//如果item有children，同样筛选一次
            o.children=filterMenu(item.children,role)
        }
        return o
      })
    }
    // location里的pathname就是路由地址
    // console.log('location',location);
    // 点击侧边栏跳转路由
    function changeMenu(params){
        // params里keyPath的第二个值就是一级菜单的key,可以借此更改被动展开的侧边栏
        //  console.log('params',params);
         const chosenSubMenu=params.keyPath[1]
        //  跳转到新组件
         navigate(params.key,{state:chosenSubMenu})
     }
    return (
        <Sider
            style={{
                background: colorBgContainer,
            }}
            width={200}
        >
            <Menu
                mode="inline"
                // defaultSelectedKeys={[location.pathname]}
                selectedKeys={[location.pathname]}
                defaultOpenKeys={[location.state]}
                style={{
                    height: '100%',
                }}
                items={filterMenu(items2,role)}
                onClick={changeMenu}
            />
        </Sider>
    )
}
